<script setup lang="ts">
import AddBtn from './components/AddBtn.vue';
import AddressItem from './components/AddressItem.vue';
import $api from '@/api'
import {ref, watch} from 'vue'
const addresses=ref([])
const {data}=$api.address.list()
watch(data,(_data:Array<any>) =>{
  addresses.value=_data.map(item =>{
    return {
      id:item._id,
      name:item.name,
      mobile:item.mobile,
      city:item.formatted_address.split(' ')[0],
      detail:item.address,
      isDefault:item.is_default
    }
  })
})
</script>

<template>
  <div
    w:flex="~ col nowrap"
    w:align="items-center"
  >
    <AddressItem v-for="(item,idx) in addresses" :key="item.id" :address="item" />
    <AddBtn @click.native="$router.push('/settings/addressedit')" />
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  meta: {
    title: '地址管理',
    auth: true
  }
}
</route>